<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>微服务生成Tag工具</title>
    <!--引入网站图标-->
    <link rel="shortcut icon" href="/image/favicon.ico">
    <!-- 引入Vue -->
    <script type="text/javascript" th:src="@{/scripts/vue.min.js}"></script>
    <!-- 引入axios -->
    <script type="text/javascript" th:src="@{/scripts/axios-0.18.0.js}"></script>
    <!-- 引入组件库 -->
    <script type="text/javascript" th:src="@{/scripts/index.js}"></script>
    <!-- 引入样式 -->
    <link type="text/css" href="/css/index.css" rel="stylesheet">

</head>
<body>
<div id="app">
    <el-container>
        <el-header id="header">
            <div id="title">微服务生成Tag工具</div>
        </el-header>
        <el-main>
            <el-tabs v-model="activeName">
                <el-tab-pane label="Tag生成" name="first">
                    <el-card class="box-card" shadow="always">
                        <el-row>
                            <el-col :span="12">
                                <div><h2>自动生成表单信息</h2></div>
                                <el-form :model="formSelectData" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                                    <el-form-item label="请输入生成文件文件夹" prop="dirPath">
                                        <el-input v-model="formSelectData.dirPath"
                                                  disabled="true"></el-input>
                                    </el-form-item>

                                    <el-form-item label="请输入要生成的sheet页名" prop="sheetName">
                                        <el-input v-model="formSelectData.sheetName"
                                                  placeholder="对应excel中sheet页名"></el-input>
                                    </el-form-item>

                                    <el-form-item label="生成的包名" prop="packageName">
                                        <el-input v-model="formSelectData.packageName"
                                                  placeholder="对应java代码中的包名"></el-input>
                                    </el-form-item>

                                    <el-form-item label="生成的客户端报文接口名" prop="clientInterFaceName">
                                        <el-input v-model="formSelectData.clientInterFaceName"
                                                  placeholder="对应接口名称"></el-input>
                                    </el-form-item>

                                    <el-form-item label="生成的服务端报文接口名" prop="ServerInterFaceName">
                                        <el-input v-model="formSelectData.ServerInterFaceName"
                                                  placeholder="对应接口名称"></el-input>
                                    </el-form-item>

                                </el-form>
                            </el-col>
                            <el-col :span="10" :offset="2">
                                <div id="empty"></div>
                                <el-upload
                                        class="upload-demo"
                                        drag
                                        action="String"
                                        :before-upload="beforeUploadHandle"
                                        :http-request="handleUploadForm"
                                        auto-upload="false"
                                        :show-file-list="false"
                                        multiple="false"
                                >
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="Tag下载" name="second">
                    <el-card class="box-card" shadow="always">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column
                                    label="文件夹路径"
                                    prop="dirPath"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    label="文件名"
                                    width="180"
                                    prop="fileName"
                            >
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="downLoadFile(scope.row)">
                                        下载
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
<script>
    let app = new Vue(
        {
            el: "#app", // 挂载根节点
            mounted() {

            },
            data: {
                activeName: 'first',
                formSelectData: {
                    dirPath: "/app/excel-service/exceldata/data",
                    sheetName: "",
                    packageName: '',
                    clientInterFaceName: '',
                    ServerInterFaceName: '',
                },
                rules: {
                    dirPath: [
                        {required: true, message: '请输入生成文件夹', trigger: 'change'}
                    ],
                    sheetName: [
                        {required: true, message: '请输入excelSheet页名称', trigger: 'change'}
                    ],
                    packageName: [
                        {required: true, message: '请输入接口对应包名', trigger: 'change'}
                    ],
                    clientInterFaceName: [
                        {required: true, message: '请输入要生成的客户端接口名称', trigger: 'change'}
                    ],
                    ServerInterFaceName: [
                        {required: true, message: '请输入要生成的服务端接口名称', trigger: 'change'}
                    ],
                },
                tableData:[]
            },
            methods: {
                // 开启全局loading
                beginGlobalLoading() {
                    this.globalLoad = this.$loading({    //开启loading动画
                        lock: true,
                        text: '正在玩命加载，请稍等···',
                        spinner: 'el-icon-loading',// 设置图标
                        background: 'rgba(0,0,0,.7)'
                    })
                },
                // 关闭全局loading
                endGlobalLoading() {
                    if (this.globalLoad) {
                        this.globalLoad.close()
                    }
                },

                // 上传文件之前校验
                async beforeUploadHandle(file) {
                    try {
                        await this.$refs['ruleForm'].validate()
                        const extensionList = ["xlsx", "xls", "XLSX", "XLS"]
                        const fileExtension =file.name.substring(file.name.lastIndexOf(".")+1)
                        if (file.size / 1024 / 1024 > 20) {
                            this.$message.warning('上传文件大小不能超过20MB!');
                            return Promise.reject(false);
                        }
                        if (!extensionList.includes(fileExtension)) {
                            this.$message.warning("文件类型必须是excel,请重新上传！！！");
                            return Promise.reject(false);
                        }
                    } catch (e) {
                        this.$message.warning("请填写左侧表单项之后在次上传文件！！！");
                        return Promise.reject(false);
                    }
                },

                // 覆盖默认上传行为
                handleUploadForm(param) {
                    let formData = new FormData();
                    formData.append('file', param.file);
                    formData.append('sheetName', this.formSelectData.sheetName);
                    formData.append('dirPath', this.formSelectData.dirPath);
                    formData.append('packageName', this.formSelectData.packageName);
                    formData.append('clientInterFaceName', this.formSelectData.clientInterFaceName);
                    formData.append('ServerInterFaceName', this.formSelectData.ServerInterFaceName);

                    axios.post("/parse/file", formData, {'Content-type': 'multipart/form-data'}).then((res) => {
                        if (res.data.code == 200) {
                           const data = res.data.data;
                           this.tableData = data;
                            this.endGlobalLoading();
                            this.$message.success('自动生成成功');
                        } else {
                            this.endGlobalLoading();
                            this.$message.error('自动生成失败');
                        }
                    })
                },

                // 下载方法
                downLoadFile(param){
                    let strings = param.packageName.split('.');
                    let packagePath = strings.join("/");

                    const filePath = `${param.dirPath}/${packagePath}/${param.fileName}.java`
                    axios.get("/downLoadFile",{
                        params: {
                            path: filePath,
                            name: `${param.fileName}.java`
                        },
                        responseType: 'blob'
                    }).then(res => {
                        const blob = new Blob([res.data]);
                        const fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
                        let downloadElement = document.createElement("a");
                        let href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = decodeURIComponent(fileName);
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    })
                }
            }
        }
    );

</script>

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
    }

    #header {
        background-color: #409EFF;
    }

    #title {
        margin: 0 auto;
        font-family: ui-sans-serif;
        font-size: larger;
        position: relative;
        top: 50%;
        /*transform: translateX(-50%);*/
        transform: translateY(-50%);
        text-align: center;
        color: white;
        font-weight: bold;
    }

    .el-upload-dragger {
        width: 600px;
        height: 460px;
    }

    #empty {
        height: 110px;
    }

    .el-upload-dragger .el-icon-upload {
        margin-top: 200px;
    }
</style>
</body>
</html>